<template>
  <PublicPage page-name="绑新赚奖金" :borderType="true">
  <scroll-view
    ref="scrollView"
    scroll-y="true"
    class="pullNew_layout_box"
    @scrolltolower="scrolltolowerFn"
    -webkit-overflow-scrolling="touch"
    >
      <!-- 海报图 -->
      <view class="banner_box">
        <view class="activityRules_btn" @click="navigateTo({url: '/pagesB/pullNew/activityRules'})"></view>
        <image class="banner_img_box" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/pullNew_banner.png"></image>
      </view>

      <view class="u-p-l-32 u-p-r-32 u-p-b-48">
        <view class="my_profit_box u-m-t-48">
          <view class="profit_tit_box fz-18 fw6">- 我的收益 -</view>
          <view class="profit_msg_box u-m-t-64">
            <view class="data_box">
              <view class="fz-12 justify-center">已获得奖金</view>
              <view class="justify-center items-end themeFontColor u-p-t-8 u-p-b-16">
                <text class="fz-24 fw6">{{pageData.contributeAmount || 0}}</text><text class="fz-16 fw4 u-p-b-6">元</text>
              </view>
              <view class="btn_box" @click="_quotaGo">查看明细</view>
            </view>
            <view class="split_line_box"></view>
            <view class="data_box">
              <view class="fz-12 justify-center">待获得导师奖励</view>
              <view class="justify-center items-end themeFontColor u-p-t-8 u-p-b-16">
                <text class="fz-24 fw6">{{pageData.waitTutorReward || 0}}</text><text class="fz-16 fw4 u-p-b-6">元</text>
              </view>
              <view class="btn_box" @click="navigateTo({url: `/pagesB/pullNew/mentorReward?waitTutorReward=${pageData.waitTutorReward}`})">查看详情</view>
            </view>
          </view>
          <view class="text_box fz-12 justify-center">本活动所有奖励均自动发放至奖金池</view>
          <view class="text_box text_box_d justify-center u-m-t-16" @click="navigateTo({url: '/pagesB/advertiseChild/prizePool'})">前往奖金池提现 ></view>
        </view>

        <view class="my_profit_box my_profit_box_b u-m-t-48">
          <view class="profit_tit_box fz-18 fw6">- 我的好友 -</view>
          <view class="explain_box fz-12" @click.stop="statusDescriptionType=true">状态说明</view>
          <view class="profit_msg_box u-m-t-64">
            <view class="data_box">
              <view class="fz-12 justify-center">累计绑定</view>
              <view class="justify-center items-end themeFontColor u-p-t-8 u-p-b-16">
                <text class="fz-24 fw6">{{pageData.recommendCount || 0}}</text><text class="fz-16 fw4 u-p-b-6">人</text>
              </view>
            </view>
            <view class="split_line_box"></view>
            <view class="data_box">
              <view class="fz-12 justify-center">今日生效</view>
              <view class="justify-center items-end themeFontColor u-p-t-8 u-p-b-16">
                <text class="fz-24 fw6">{{pageData.todayRecommendCount || 0}}</text><text class="fz-16 fw4 u-p-b-6">人</text>
              </view>
            </view>
          </view>
          <view class="friends_list_box">
            <!-- 切换TAB -->
            <view class="tabList_box">
              <view class="tab_name_box" v-for="(tab,tabIndex) in tabList" :key="tabIndex" @click="tabFn(tab)" :class="{'select_tab':tabType==tab.type}">
                {{tab.name}}<text class="fz-12">({{playvolumeFn(tab.value)}})</text>
              </view>
            </view>
            <!-- 好友列表 -->
            <view class="user_list_box" v-for="(friend, index) in friendList" :key="index" v-if="friendList.length>0">
              <view class="user_msg_l">
                <image class="user_head_img" mode="aspectFill" :src="friend.communityLogo || 'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'" alt="">
                <view class="user_name">
                  <view class="name_box">
                    <view class="communityName_box">{{friend.communityName}}</view>
                    <view class="identifying_box" v-if="tabType==2">{{friend.protectDay>=0?'保护期':'非保护期'}}</view>
                    <view class="identifying_box_two" v-if="tabType==3">{{friend.invalidType==1?'被抢绑':'已过期'}}</view>
                  </view>
                  <view class="fz-12 viceColor" v-if="tabType==1 || tabType==3">累计贡献：<text class="u-m-l-6" :class="{'themeFontColor':tabType==1}">￥{{friend.contributeAmount}}</text></view>
                  <view class="fz-12 viceColor" v-if="tabType==2">暂未绑定</view>
                </view>
              </view>
              <view class="user_msg_r" v-if="tabType==1||tabType==2">
                <view class="remind_box">
                  <button class="red_btn remind_btn_box fz-12" open-type="share" id="shareIndexId">提醒开团</button>
                </view>
                <view class="fz-12 viceColor" v-if="friend.effectiveDay>0&&tabType==1">有效期剩余：{{friend.effectiveDay}}天</view>
                <view class="fz-12 viceColor" v-if="friend.protectDay>=0&&tabType==2">保护期剩余：{{friend.protectDay}}天</view>
                <view class="fz-12 viceColor" v-if="friend.protectDay<0&&tabType==2">保护期已结束</view>
              </view>
            </view>
            <view class="lackTrial_box" v-if="friendList.length<1">
              <text v-if="tabType==1">暂无已生效好友，快邀请好友来赚奖金吧～</text>
              <text v-if="tabType==2">暂无未生效好友，快邀请好友来赚奖金吧～</text>
              <text v-if="tabType==3">暂无已失效好友</text>
            </view>
          </view>
        </view>

      </view>
    </scroll-view>
    <view class="shareBtn_list">
      <button class="share_btn themeFontColor fz-16" @click.stop="drawPosterFn"><i class="iconfont icon-pengyouquan1 fz-16 u-m-r-8" />生成绑定海报</button>
      <button class="share_btn themeFontColor share_btn_b fz-16" open-type="share" id="shareUser"><i class="iconfont icon-weixin1 fz-16 u-m-r-8"/>邀请好友赚钱</button>
    </view>
    <!-- 说明弹窗 -->
    <view class="fixed_box" v-if="statusDescriptionType">
      <view class="publicPopup_box" @click.stop="">
        <view class="public_msg_box">
          <view class="public_titName_box">新用户状态说明</view>
          <scroll-view class="commission_scroll" scroll-y="true" -webkit-overflow-scrolling="touch" scroll-with-animation="true">
            <view class="tit_box fw6">已生效</view>
            <view class="text_box u-m-b-20">新用户在初步绑定后产生过有效的订单，则视为已生效的绑定</view>
            <view class="tit_box fw6">未生效</view>
            <view class="text_box u-m-b-20">新用户在初步绑定后未产生有效的订单，则视为未生效的绑定</view>
            <view class="tit_box fw6">保护期</view>
            <view class="text_box u-m-b-20">新用户自绑定日起，有7天的保护期。保护期间不会被别人抢绑。保护期内，新用户产生有效订单则永久不会被其他人抢绑。</view>
            <view class="tit_box fw6">非保护期</view>
            <view class="text_box u-m-b-20">新用户7天保护期内一直未产生订单，七天保护器结束后，则处于非保护期。非保护期依然属于你绑定，但是随时可能被他人抢绑。</view>
            <view class="tit_box fw6">已过期</view>
            <view class="text_box u-m-b-20">产生过有效订单的用户，绑定180天后视为已失效，不再贡献奖励。</view>
            <view class="tit_box fw6">被抢绑</view>
            <view class="text_box u-m-b-20">新用户在初步绑定后产生过有效的订单，则视为已生效的绑定</view>
          </scroll-view>
          <button class="iKnow_btn u-m-t-20" hover-class='hover' @click.stop="statusDescriptionType=false">我知道了</button>
        </view>
      </view>
    </view>
    <!-- 拉新--生成海报组件 -->
    <PullNewPosters ref="childPullNewPosters" @posterShareSuccess="_drawPSSuccess"/>
    <!-- 海报预览 -->
    <PosterPopup v-if="dlPosterPopup" :posterObj="posterObject" @closePosterPopupFn="closePosterPopupFn" />
  </PublicPage>
</template>
<script>
import PublicPage from "@/components/publicPage/index.vue"
import Util from "@/api/util.js"
import pullNew from "@/api/pullNew.js"
import PullNewPosters from "@/components/shareImage/pullNewPosters.vue"
import PosterPopup from '@/components/shareModal/posterPopup.vue'
export default {
  components: {
    PublicPage,
    PullNewPosters,
    PosterPopup
  },
  data () {
    return {
      tabList: [
        {
          name: '已生效',
          type: 1,
          value: 0,
        },{
          name: '未生效',
          type: 2,
          value: 0,
        },{
          name: '已失效',
          type: 3,
          value: 0,
        }
      ],
      tabType: 1,
      statusDescriptionType: false,
      pageData: {},  // 页面数据
      friendList: [],
      getParams: {
        currentPage: 1,
        pageSize: 10,
        status: 1,
        finish: false, // 是否还有更多
      },
      dlPosterPopup: false,
      posterObject: {}, // 海报
    }
  },
  onLoad () {
  },
  onShow () {
    this.inviteNewGetInfoFn()
    // 禁用菜单的分享按钮
    wx.hideShareMenu({
      menus: ["shareAppMessage"]
    })
  },
  onShareAppMessage(res) {
    let userInfo = this.$store.state.userInfo
    let _shareObj = {
      title: '超好用的社群分销工具，视频带货出单快，全场功能免费用！',
      imageUrl: 'https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/share_pullNew_img.png',
      path: `/pagesB/pullNew/landingPage?idCode=${userInfo.idCode}`
    }
    if(res.from === 'button') {
      if (res.target.id == 'shareIndexId') {
        _shareObj = {
          title: '我发现了一个超好用的视频帮卖小程序！快来一起玩转私域流量！',
          imageUrl: `https://image.qqpyyds.com/mpAppImg/bgImg/homePageShare_img.png?t=${Date.parse(new Date())}`,
          path: '/pages/index/index'
        }
      }
    }
    console.log(JSON.parse(JSON.stringify({_shareObj})), '分享参数打印')
    return _shareObj
  },
  methods: {
    async inviteNewGetInfoFn () { //页面数据
      const { data } = await pullNew.inviteNewGetInfo()
      this.pageData = data
      // 3个TAB的数据
      this.tabList[0].value = this.pageData.effectiveCount || 0
      this.tabList[1].value = this.pageData.waitEffectiveCount || 0
      this.tabList[2].value = this.pageData.invalidCount || 0
      this.getFriendPageFn()
    },
    _quotaGo(){
      this.navigateTo({url: `/pagesB/advertiseChild/bonusDetails?totalBonus=${this.pageData.contributeAmount}&pageType=1`})
    },
    async getFriendPageFn () { //好友列表数据
      if (this.getParams.finish) return
      this.getParams = {
        ...this.getParams,
        status: this.tabType
      }
      const { data } = await pullNew.getFriendPage(this.getParams)
      this.friendList = this.getParams.currentPage === 1? data.records : this.friendList.concat(data.records)
      this.getParams.finish = (data.records.length<this.getParams.pageSize)?true:false
    },
    scrolltolowerFn () {
      if (this.getParams.finish) return
      this.getParams.currentPage = Number(this.getParams.currentPage)+1
      this.getFriendPageFn()
    },
    // 切换TAB
    tabFn (data) {
      if (data.type == this.tabType) return
      this.tabType = data.type
      this.getParams.currentPage = 1
      this.getParams.finish = false
      this.getFriendPageFn()
    },
    drawPosterFn () {
      let userInfo = this.$store.state.userInfo
      let canvasData = {
        page: 'pagesB/pullNew/landingPage', // 二维码地址
        options: {
          applyForHelp: true,
          shareType: true,
          idCode: userInfo.idCode, // 供货的idcode
        },
        userAvatar: userInfo.communityLogo,
        userNickname: userInfo.communityName,
        tipsText: '长按识别二维码 立即体验', // 提示文案
      }
      this.$refs.childPullNewPosters.sharePosterFrends(canvasData)
    },
    // 海报绘制成功回调
    _drawPSSuccess (res) {
      console.log(res,'海报绘制成功回调')
      this.posterObject = res
      this.isShowSharePopup = false
      this.dlPosterPopup = true
    },
    closePosterPopupFn () {
      this.dlPosterPopup = false
    },
    playvolumeFn (mun) { // 处理数据过万的显示
      return Util.playvolume(mun)
    },
  }
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>